<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Descriptions 描述列表</title>
	<!-- <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" /> -->
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<!-- <script src="//unpkg.com/element-plus"></script> -->
	<script src="../static/js/element-plue2.js"></script>
	
	<script src="../static/js/icons-vue.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
<style type="text/css">
.my-label {
  background: var(--el-color-success-light-9);
}
.my-content {
  background: var(--el-color-danger-light-9);
}
</style>
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">列表形式展示多个字段。</p>
	<el-descriptions title="用户信息：">
		<el-descriptions-item label="姓名">张三</el-descriptions-item>
		<el-descriptions-item label="电话">18100000000</el-descriptions-item>
		<el-descriptions-item label="省份">广州</el-descriptions-item>
		<el-descriptions-item label="标签"><el-tag size="small">School</el-tag></el-descriptions-item>
		<el-descriptions-item label="地址">广州XX市XX街道XX路XX号（XXXXXXXX）</el-descriptions-item>
	</el-descriptions>
	
	<el-divider content-position="left">不同尺寸</el-divider><!-- =============================================================== -->
	<el-radio-group v-model="size">
		<el-radio label="large">Large</el-radio>
		<el-radio>Default</el-radio>
		<el-radio label="small">Small</el-radio>
	</el-radio-group>
	
	<el-descriptions class="margin-top" title="无边框" :column="4" :size="size" :style="blockMargin">
		<template #extra>
			<el-button type="primary">Operation</el-button>
		</template>
		<el-descriptions-item label="姓名">张三</el-descriptions-item>
		<el-descriptions-item label="电话">18100000000</el-descriptions-item>
		<el-descriptions-item label="省份">广州</el-descriptions-item>
		<el-descriptions-item label="标签"><el-tag size="small">School</el-tag></el-descriptions-item>
		<el-descriptions-item label="地址">广州XX市XX街道XX路XX号（XXXXXXXX）</el-descriptions-item>
	</el-descriptions>
	
	<el-descriptions class="margin-top" title="带边框" :column="4" :size="size" border>
		<template #extra>
			<el-button type="primary">Operation</el-button>
		</template>
		<el-descriptions-item>
			<template #label>
				<div class="cell-item"><el-icon :style="iconStyle"><user /></el-icon>姓名</div>
			</template>
			张三
		</el-descriptions-item>
		<el-descriptions-item>
			<template #label>
				<div class="cell-item"><el-icon :style="iconStyle"><iphone /></el-icon>电话</div>
			</template>
			18100000000
		</el-descriptions-item>
		<el-descriptions-item>
			<template #label>
				<div class="cell-item"><el-icon :style="iconStyle"><location /></el-icon>省份</div>
			</template>
			广州
		</el-descriptions-item>
		<el-descriptions-item>
			<template #label>
				<div class="cell-item"><el-icon :style="iconStyle"><tickets /></el-icon>标签</div>
			</template>
			<el-tag size="small">School</el-tag>
		</el-descriptions-item>
		<el-descriptions-item>
			<template #label>
				<div class="cell-item"><el-icon :style="iconStyle"><office-building /></el-icon>地址</div>
			</template>
			广州XX市XX街道XX路XX号（XXXXXXXX）
		</el-descriptions-item>
	</el-descriptions>
	
	<el-divider content-position="left">垂直列表</el-divider><!-- =============================================================== -->
	<p class="desc">增加一个属性： direction="vertical" 就可以了</p>
	<el-radio-group v-model="size">
		<el-radio label="large">Large</el-radio>
		<el-radio>Default</el-radio>
		<el-radio label="small">Small</el-radio>
	</el-radio-group>
	
	<el-descriptions class="margin-top" title="无边框" direction="vertical" :column="4" :size="size" :style="blockMargin">
		<template #extra>
			<el-button type="primary">Operation</el-button>
		</template>
		<el-descriptions-item label="姓名">张三</el-descriptions-item>
		<el-descriptions-item label="电话">18100000000</el-descriptions-item>
		<el-descriptions-item label="省份">广州</el-descriptions-item>
		<el-descriptions-item label="标签"><el-tag size="small">School</el-tag></el-descriptions-item>
		<el-descriptions-item label="地址">广州XX市XX街道XX路XX号（XXXXXXXX）</el-descriptions-item>
	</el-descriptions>
	
	<el-descriptions class="margin-top" title="带边框" direction="vertical" :column="4" :size="size" border>
		<template #extra>
			<el-button type="primary">Operation</el-button>
		</template>
		<el-descriptions-item>
			<template #label>
				<div class="cell-item"><el-icon :style="iconStyle"><user /></el-icon>姓名</div>
			</template>
			张三
		</el-descriptions-item>
		<el-descriptions-item>
			<template #label>
				<div class="cell-item"><el-icon :style="iconStyle"><iphone /></el-icon>电话</div>
			</template>
			18100000000
		</el-descriptions-item>
		<el-descriptions-item>
			<template #label>
				<div class="cell-item"><el-icon :style="iconStyle"><location /></el-icon>省份</div>
			</template>
			广州
		</el-descriptions-item>
		<el-descriptions-item>
			<template #label>
				<div class="cell-item"><el-icon :style="iconStyle"><tickets /></el-icon>标签</div>
			</template>
			<el-tag size="small">School</el-tag>
		</el-descriptions-item>
		<el-descriptions-item>
			<template #label>
				<div class="cell-item"><el-icon :style="iconStyle"><office-building /></el-icon>地址</div>
			</template>
			广州XX市XX街道XX路XX号（XXXXXXXX）
		</el-descriptions-item>
	</el-descriptions>
	
	<el-divider content-position="left">自定义样式</el-divider><!-- =============================================================== -->
	<el-descriptions title="用户信息：" :border="true">
		<el-descriptions-item label="姓名" label-align="right" align="center" label-class-name="my-label" class-name="my-content" width="150px">张三</el-descriptions-item>
		<el-descriptions-item label="电话" span=2>18100000000 （我要占2列的位置）</el-descriptions-item>
		<el-descriptions-item label="省份">广州</el-descriptions-item>
		<el-descriptions-item label="标签"><el-tag size="small">School</el-tag></el-descriptions-item>
		<el-descriptions-item label="地址">广州XX市XX街道XX路XX号（XXXXXXXX）</el-descriptions-item>
	</el-descriptions>
	
</div>

</body>
<script>
const Main = {
	data() {
		return {
			size: '',
			icon_map: { large: '8px', default: '6px', small: '4px', },
			block_map: { large: '32px', default: '28px', small: '24px', },
			
		}
	},
	computed:{
		blockMargin(){
			return {marginTop: this.block_map[this.size] || this.block_map['default']};
		},
		iconStyle(){
			return {marginRight: this.icon_map[this.size] || this.icon_map['default']};
		}
	},
	methods:{
		fn(){
			this.message = "欢迎来到HTML中文网。";
		},
		hello(par){
			this.message = "参数值为：" + par;
		}
	}
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)};
app.use(ElementPlus);
let vm = app.mount("#app");
</script>
</html>